<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/11/9 09:59
 -->
<template>
  <div class="page">
    <div class="bg-[#fff] p-12px pb-0">
      <el-form label-width="80px" label-position="right">
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="记录时间">
              <el-date-picker
                v-model="search.time"
                class="!w-full"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <div class="pl-8px">
              <el-button type="primary">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mt-10px bg-[#fff] py-8px px-12px">
      <g-title>
        <div class="w-full flex justify-between items-center">
          <span>日志列表</span>
        </div>
      </g-title>
      <g-table ref="table" v-bind="table" class="absolute flex-1"></g-table>
      <g-pagination v-if="tablePage.total" v-bind.sync="tablePage" class="mt-8px"></g-pagination>
    </div>

    <!-- 日志详情   -->
    <LogDetailDialog ref="logDetail" :visible.sync="visible.detail"></LogDetailDialog>
  </div>
</template>

<script>
import LogDetailDialog from './components/LogDetailDialog'
export default {
  components: { LogDetailDialog },
  data() {
    return {
      visible: {
        detail: false,
        add: false,
        edit: false
      },
      search: {
        account: '',
        userName: '',
        status: '正常'
      },
      options: {
        zt: [
          { label: '正常', value: '正常' },
          { label: '注销', value: '注销' }
        ]
      },
      tablePage: {
        page: 1,
        total: 1,
        size: 5,
        background: true,
        layout: 'total, sizes, prev, pager, next'
      },
      table: {
        // 审批待办
        loading: true,
        data: [],
        height: `calc(100vh - 320px)`,
        columns: [
          { type: 'index', label: '记录时间', width: '120px' },
          { prop: 'title', label: '操作人', align: 'center' },
          { prop: 'title', label: '接口名称', align: 'center' },
          { prop: 'index', label: '请求参数', align: 'center' },
          { prop: 'index', label: '操作人角色', align: 'center' },
          { prop: 'index', label: '日志级别', align: 'center' },
          { slot: 'operation', label: '操作', width: '150px', align: 'center' }
        ]
      }
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    this.$once('hook:beforeDestroy', () => {
      // this.removeEvents()
    })
  },

  methods: {
    onShowDialog(type) {
      if (type == 'add') {
        this.visible.add = true
      } else if (type == 'edit') {
        this.visible.edit = true
      }
    },

    onReset() {
      this.search = {
        ...this.search,
        account: '',
        userName: '',
        status: '正常'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
}
</style>
